<template>
  <div class="merchantKanban-warp">
    <div class="merchantKanban">
      <div class="header-box flex">
        <h1 v-if="timeDate">数据截止于{{ timeDate }}新上单系统商家数据</h1>
        <h1 v-else>新上单系统商家数据</h1>
        <a-button type="primary" @click="handleToPage"
          >查看商家销售数据</a-button
        >
      </div>
      <!-- 商家数量信息 -->
      <a-row class="margin-t-df">
        <a-col :span="24">
          <div class="merchant-num ll-card flex">
            <div class="num-item flex" @click="handleToPage">
              <img
                :src="require('$merchant/static/img/icon_data_ktsj@2x.png')"
              />
              <div class="item-text">
                <a-statistic :value="(getRelease && getRelease.addBusinessNum) || 0"/>
                <span>开通商家</span>
              </div>
            </div>
            <div class="box-line"></div>
            <div class="num-item flex" @click="handleToPage">
              <img
                :src="require('$merchant/static/img/icon_data_rzsj@2x.png')"
              />
              <div class="item-text">
                <a-statistic class="reds" :value="(getRelease && getRelease.authBusinessNum) || 0"/>
                <span>认证商家</span>
              </div>
            </div>
            <div class="box-line"></div>
            <div class="num-item flex" @click="handleToPage">
              <img
                :src="require('$merchant/static/img/icon_data_fwht@2x.png')"
              />
              <div class="item-text">
                <a-statistic class="orgs" :value="(getRelease && getRelease.enterSignBusinessNum) || 0"/>
                <span>服务合同签约商家</span>
              </div>
            </div>
            <div class="box-line"></div>
            <div class="num-item flex" @click="handleToPage">
              <img
                :src="require('$merchant/static/img/icon_data_jsht@2x.png')"
              />
              <div class="item-text">
                <a-statistic class="blues" :value="(getRelease && getRelease.settlementSignBusinessNum) || 0"/>
                <span>结算合同签约商家</span>
              </div>
            </div>
            <div class="box-line"></div>
            <div class="num-item flex" @click="handleToPage">
              <img
                :src="require('$merchant/static/img/icon_data_zssj@2x.png')"
              />
              <div class="item-text">
                <a-statistic class="pinks" :value="(getRelease && getRelease.onsaleBusinessNum) || 0"/>
                <span>在售商家</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <!-- 商品图表信息 -->
      <a-row type="flex" class="tb-box-one margin-t-df ll-row">
        <a-col flex="6">
          <a-row class="ll-card">
            <a-col :span="12">
              <div class="tb-title">
                <p>
                  <img :src="require('$merchant/static/img/icon_data_amountgoods@2x.png')" />
                  <span>商品数量</span>
                </p>
              </div>
              <h5 v-if="!tbA">暂无数据</h5>
              <div id="tbOne" class="tb-one"></div>
              <div class="tb-text" v-show="getRelease.onsaleProductNum">
                <span>商品总量</span>
                <p>
                  {{ ((getRelease && getRelease.onsaleProductNum) || 0) + ((getRelease && getRelease.followProductNum) || 0) + ((getRelease && getRelease.offshopProductNum) || 0) }}
                </p>
              </div>
            </a-col>
            <a-col :span="12">
              <div class="tb-title">
                <p>
                  <img :src="require('$merchant/static/img/icon_data_saleschannels@2x.png')" />
                  <span>销售渠道<span class="tb-title-sub">（在售套餐）</span></span>
                </p>
              </div>
              <h5 v-if="!tbB">暂无数据</h5>
              <div id="tbTwo" class="tb-two"></div>
              <!--              <div class="tb-text" v-show="qudaoValue">
                <span>套餐总量</span>
                <p>{{ qudaoValue }}</p>z
              </div>-->
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="3">
          <div class="ll-card">
            <div class="tb-title">
              <p>
                <img :src="require('$merchant/static/img/icon_data_covertype@2x.png')" />
                <span>覆盖类型<span class="tb-title-sub">（在售产品）</span></span>
              </p>
            </div>
            <h5 v-if="!tbC">暂无数据</h5>
            <div id="tbThree" class="tb-three"></div>
          </div>
        </a-col>
      </a-row>
      <!-- 销量信息 -->
      <a-row type="flex" class="tb-box-two margin-t-df ll-row">
        <a-col flex="6">
          <a-row type="flex">
            <a-col flex="3">
              <div class="sales-item ll-card">
                <p class="sales-num">
                  实际销量
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>销售的套餐数量</span>
                    </template>
                    <img :src="require('$merchant/static/img/icon_data_instruction@2x.png')" />
                  </a-tooltip>
                </p>
                <p class="sales-amount">
                  {{ thousandth((getRelease && getRelease.allOrderNum) || 0) }}
                </p>
              </div>
            </a-col>
            <a-col flex="3">
              <div class="sales-item margin-lr-10 ll-card">
                <p class="sales-num">
                  核销数量
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>核销的套餐数量</span>
                    </template>
                    <img :src="require('$merchant/static/img/icon_data_instruction@2x.png')" />
                  </a-tooltip>
                </p>
                <p class="sales-amount">
                  {{ thousandth((getRelease && getRelease.allCompleteOrderNum) || 0) }}
                </p>
              </div>
            </a-col>
            <a-col flex="3">
              <div class="sales-item ll-card">
                <p class="sales-num">
                  退款数量
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>退款的套餐数量</span>
                    </template>
                    <img :src="require('$merchant/static/img/icon_data_instruction@2x.png')" />
                  </a-tooltip>
                </p>
                <p class="sales-amount">
                  {{ thousandth((getRelease && getRelease.allRefundOrderNum) || 0) }}
                </p>
              </div>
            </a-col>
          </a-row>
          <a-row type="flex" class="margin-t-10">
            <a-col flex="3">
              <div class="sales-item ll-card">
                <p class="sales-num">
                  订单流水
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>销售的订单对应的支付金额</span>
                    </template>
                    <img :src="require('$merchant/static/img/icon_data_instruction@2x.png')" />
                  </a-tooltip>
                </p>
                <p class="sales-amount">
                  {{ '￥' + price(getRelease && getRelease.allOrderMoney) || 0 }}
                </p>
              </div>
            </a-col>
            <a-col flex="3">
              <div class="sales-item margin-lr-10 ll-card">
                <p class="sales-num">
                  核销流水
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>核销的订单对应的支付金额</span>
                    </template>
                    <img :src="require('$merchant/static/img/icon_data_instruction@2x.png')" />
                  </a-tooltip>
                </p>
                <p class="sales-amount">
                  {{ '￥' + price(getRelease && getRelease.allCompleteOrderMoney) || 0 }}
                </p>
              </div>
            </a-col>
            <a-col flex="3">
              <div class="sales-item ll-card">
                <p class="sales-num">
                  退款流水
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>退款的订单对应的支付金额</span>
                    </template>
                    <img :src="require('$merchant/static/img/icon_data_instruction@2x.png')" />
                  </a-tooltip>
                </p>
                <p class="sales-amount">
                  {{ '￥' + price(getRelease && getRelease.allRefundOrderMoney) || 0 }}
                </p>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col flex="3">
          <div class="withdrawal-box ll-card">
            <div class="tb-title">
              <p>
                <img :src="require('$merchant/static/img/icon_data_money@2x.png')" />
                <span>商家款</span>
              </p>
            </div>
            <h5 v-if="!tbA">暂无数据</h5>
            <div class="withdrawal" id="tbFwo"></div>
          </div>
        </a-col>
      </a-row>
      <!-- 商家流水排名 -->
      <a-row class="flow-list margin-t-df ll-row">
        <a-col :span="12">
          <div class="flow-sub">
            <p>
              <span>商家流水排名</span>
              <span class="flow-icon">TOP10</span>
            </p>
          </div>
          <div class="ll-card ll-table margin-t-s">
            <a-table :columns="columns_1" :data-source="tableData1" :pagination="false">
              <span slot="rowNum" slot-scope="text, record" class="ranking">
                <img :src="require('$merchant/static/img/icon_ranking_first@2x.png')" v-if="record.key == 1" />
                <img :src="require('$merchant/static/img/icon_ranking_second@2x.png')" v-else-if="record.key == 2" />
                <img :src="require('$merchant/static/img/icon_ranking_third@2x.png')" v-else-if="record.key == 3" />
                <span v-else>{{ record.key }}</span>
              </span>
              <span slot="businessName" slot-scope="text, record">{{ record.businessName }}</span>
              <span slot="businessCategory" slot-scope="text, record">{{ record.businessCategory }}</span>
              <span slot="allOrderMoney" slot-scope="text, record" class="money">{{ '￥' + price(record.allOrderMoney) }}</span>
            </a-table>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="flow-sub">
            <p>
              <span>商品流水排名</span>
              <span class="flow-icon">TOP10</span>
            </p>
          </div>
          <div class="ll-card ll-table margin-t-s">
            <a-table :columns="columns_2" :data-source="tableData2" :pagination="false">
              <span slot="rowNum" slot-scope="text, record" class="ranking">
                <img :src="require('$merchant/static/img/icon_ranking_first@2x.png')" v-if="record.key == 1" />
                <img :src="require('$merchant/static/img/icon_ranking_second@2x.png')" v-else-if="record.key == 2" />
                <img :src="require('$merchant/static/img/icon_ranking_third@2x.png')" v-else-if="record.key == 3" />
                <span v-else>{{ record.key }}</span>
              </span>
              <span slot="productName" slot-scope="text, record">{{ record.productName }}</span>
              <span slot="productCategory" slot-scope="text, record">{{ record.productCategory }}</span>
              <span slot="allOrderNum" slot-scope="text, record">{{ record.allOrderNum }}</span>
              <span slot="allOrderMoney" slot-scope="text, record" class="money">{{ '￥' + price(record.allOrderMoney) }}</span>
            </a-table>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment'
import { columns_1, columns_2 } from './static/js/mock'
import { lastDay } from '@/service'
import { mscf } from '@/util'
export default {
  name: 'merchantKanban',
  props: {
    listService1: {
      type: Function
    },
    listService2: {
      type: Function
    },
    listService3: {
      type: Function
    },
    listService4: {
      type: Function
    },
    tab: {
      type: Number
    }
  },
  data() {
    return {
      columns_1,
      columns_2,
      timeDate: null,
      thisTime: 0,
      oneCharts: null,
      twoCharts: null,
      threeCharts: null,
      fwoCharts: null,
      tbA: false,
      tbB: false,
      tbC: false,
      qudaoValue: 0,
      tableData1: [],
      tableData2: [],
      getRelease: {
        addBusinessNum: 0,
        allBusinessMoney: 0,
        allCompleteOrderMoney: 0,
        allCompleteOrderNum: 0,
        allOrderMoney: 0,
        allOrderNum: 0,
        allProductNum: 0,
        allRefundOrderNum: 0,
        authBusinessNum: 0,
        day: 0,
        enterSignBusinessNum: 0,
        followProductNum: 0,
        id: '',
        leftBusinessMoney: 0,
        locationId: 0,
        offshopProductNum: 0,
        onsaleBusinessNum: 0,
        onsaleProductNum: 0,
        optTime: '',
        regionId: 0,
        settlementSignBusinessNum: 0,
        userId: 0
      },
      routerUrl: 'https://nb-oa-web.lianlianlvyou.com/#/frame',
      routerUrlDebug: 'https://nb-oa-web.lianlianlvyou.com/debug/index.html#/frame',
      routerUrlTest: 'http://192.168.10.113:9085/#/frame'
    }
  },
  async mounted() {
    this.thisTime = await lastDay()
    this.initCharts()
    this.loadSummary()
    this.loadSummaryTwo()
    this.loadSummaryThree()
    this.loadFlowing()
    this.getProductDetailRank()
  },
  methods: {
    // 初始化图表
    initCharts() {
      let _this = this
      this.oneCharts = echarts.init(document.getElementById('tbOne'))
      this.twoCharts = echarts.init(document.getElementById('tbTwo'))
      this.threeCharts = echarts.init(document.getElementById('tbThree'))
      this.fwoCharts = echarts.init(document.getElementById('tbFwo'))
      window.addEventListener(
        'resize',
        () => {
          _this.oneCharts.resize()
          _this.twoCharts.resize()
          _this.threeCharts.resize()
          _this.fwoCharts.resize()
        },
        false
      )
    },
    // 商家汇总-图表1
    async loadSummary() {
      await this.listService1({ day: this.thisTime }).then((res) => {
        // console.log("商家汇总1:=>输出内容", res);
        if (!res) return this.$messageSend.warning('暂无数据')
        this.tbA = true
        this.timeDate = moment(res.day + '').format('ll')
        this.getRelease = res
        var jsonA = [
          { value: (res && res.onsaleProductNum) || 0, name: '在售商品' },
          { value: (res && res.followProductNum) || 0, name: '跟进商品' },
          { value: (res && res.offshopProductNum) || 0, name: '下架商品' }
        ]
        var jsonB = [(res && res.leftBusinessMoney) / 100 || 0, (res && res.allBusinessMoney - res.leftBusinessMoney) / 100 || 0, (res && res.allBusinessMoney) / 100 || 0]
        this.drawPieChart1(jsonA, 1)
        this.drawPieChart3(jsonB)
      })
    },
    // 渠道数据-图表2
    async loadSummaryTwo() {
      await this.listService2({ day: this.thisTime, indexType: 1 }).then((res) => {
        if (!res || !res.length) return
        this.tbB = true
        res.forEach((element) => {
          this.qudaoValue += element.indexIntValue
          element.value = element.indexIntValue
          element.name = element.indexName.replace('渠道上架商品数', '').replace('支付宝', '其他')
        })
        // console.log("渠道数据2:=>输出内容", res);
        this.drawPieChart1(res, 2)
      })
    },
    // 类型数据-图表3
    async loadSummaryThree() {
      await this.listService2({ day: this.thisTime, indexType: 2 }).then((res) => {
        if (!res || !res.length) return
        this.tbC = true
        var arrData = []
        res.forEach((element) => {
          element.value = element.indexIntValue
          element.name = element.indexName.replace('类上架商品数', '')
          arrData.push(element.indexName.replace('类上架商品数', ''))
        })
        // console.log("类型数据3:=>输出内容", res);
        this.drawPieChart2(res, arrData)
      })
    },
    // 获取商家流水排名
    async loadFlowing() {
      await this.listService3({ day: this.thisTime }).then((res) => {
        if (!res || !res.length) return
        res.forEach((element, index) => {
          element.key = index + 1
        })
        this.tableData1 = res
        // console.log("获取商家流水排名4:=>输出内容", res);
      })
    },
    // 获取商品流水排名
    async getProductDetailRank() {
      const time = await lastDay()
      await this.listService4({ day: this.thisTime }).then((res) => {
        if (!res || !res.length) return
        res.forEach((element, index) => {
          element.key = index + 1
        })
        this.tableData2 = res
        // console.log("获取商品流水排名5:=>输出内容", res);
      })
    },
    // 跳转商家列表
    handleToPage() {
      if (process.env.NODE_ENV == 'development') {
        this.$router.push({
          path: '/merchant/merchantList',
          name: 'merchantList',
          query: { tab: this.tab }
        })
        return
      }
      mscf.emit('openNewSystem', '*', {
        target: 'marketing',
        page: 'merchantList',
        params: {},
        query: {
          tab: this.tab,
          _r: (Math.random() * 100).toFixed(0)
        }
      })
      // window.open(routeUrl.href, "_blank");
      // let url = this.routerUrlTest + "/merchant/merchantList?tab=" + this.tab;
      // window.open(url);
    },
    drawPieChart1(json, type) {
      const color1 = ['#6395F9', '#6BDFAE', '#6D7FA0']
      const color2 = ['#57AE59', '#F55F4E', '#1D6FE9']
      var options = {
        width: 255,
        tooltip: {
          borderWidth: 0,
          backgroundColor: 'rgba(255,255,255,0.7)',
          formatter: '{b}数量:{c} <br/> 当前占比:{d}%'
        },
        legend: {
          icon: 'rect',
          top: 'center',
          left: '75%',
          orient: 'vertical',
          itemWidth: 14,
          itemGap: 20
        },
        series: [
          {
            type: 'pie',
            color: type === 1 ? color1 : color2,
            radius: ['48%', '70%'],
            center: ['65%', '50%'],
            avoidLabelOverlap: false,
            data: json,
            label: {
              normal: {
                show: true,
                color: '#000000',
                formatter: function(params) {
                  return params.name.replace('商品', '') + ':' + +params.value
                }
              }
            },
            labelLine: { show: true, length: 10, length2: 0 }
          }
        ]
      }
      if (type === 1) {
        this.oneCharts.setOption(options)
      } else {
        this.twoCharts.setOption(options)
      }
    },
    drawPieChart2(json, arrData) {
      const colorList = ['#1D6FE9', '#45C769', '#FAD032', '#301DE9', '#FA3237', '#C0C08B', '#FFA99F', '#DBB9AB', '#FF9257', '#BBBBBB']
      var options = {
        tooltip: {
          borderWidth: 0,
          backgroundColor: 'rgba(255,255,255,0.7)',
          formatter: '{b}:{c}'
        },
        grid: { right: 0, left: 0 },
        xAxis: {
          type: 'category',
          data: arrData,
          axisLabel: {
            color: '#333333',
            margin: 25,
            align: 'center',
            fontSize: 12,
            interval: 0,
            rotate: 30 // 调整数值改变倾斜的幅度（范围-90到90）
          },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        yAxis: {
          type: 'value',
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            data: json,
            type: 'bar',
            barWidth: '20px',
            label: {
              normal: {
                show: true,
                lineHeight: 30,
                position: 'top',
                textStyle: { color: '#999999', fontSize: 12 }
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      this.threeCharts.setOption(options)
    },
    drawPieChart3(json) {
      let _this = this
      const colorList = ['#d2d2d2', '#F55F4E', '#1D6FE9']
      var options = {
        tooltip: {
          borderWidth: 0,
          backgroundColor: 'rgba(255,255,255,0.7)',
          formatter: function(params) {
            return params.name + ':' + _this.price(params.value * 100)
          }
        },
        grid: {
          right: '10%',
          left: '15%'
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          axisTick: { show: false },
          axisLine: { show: false },
          splitLine: { show: false }
        },
        yAxis: {
          axisLabel: {
            color: '#333333',
            fontSize: 12
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLine: { show: false },
          data: ['未提现', '已提现', '总款']
        },
        series: [
          {
            name: '2011',
            type: 'bar',
            barWidth: '20px',
            data: json,
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: { color: '#999999', fontSize: 12 },
                formatter: function(params) {
                  return _this.price(params.value * 100)
                }
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      this.fwoCharts.setOption(options)
    },
    // 金额转换
    price(a) {
      var num = Number(a)
      if (isNaN(num)) return '0.00'
      if (!num) {
        // 等于0
        return num + '.00'
      } else {
        // 不等于0
        num = Math.round(num * 100) / 10000
        num = num.toFixed(2)
        num += '' // 转成字符串
        var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g // 千分符的正则
        return num.replace(reg, '$1,') // 千分位格式化
      }
    },
    thousandth(val){
      if(!val) return 0;
      var str = val += "";
      var reg = /(?=(?!(\b))(\d{3})+$)/g;
      return str.replace(reg,",")
    }
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'udc_font';
  src: url('~@/modules/marketing/pages/merchant/static/udc1.04-bold.otf');
}
.merchantKanban-warp {
  height: inherit;
  overflow: auto;
  background: linear-gradient(to right, rgba(189, 221, 253, 0.46), #eaf2ff, rgba(247, 238, 255, 0), #ecd8ff);
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}
.merchantKanban {
  width: 1366px;
  min-width: 100%;
  min-height: 100%;
  padding: 20px;
  .header-box {
    justify-content: space-between;
    h1 {
      font-size: 24px;
      color: #999999;
      padding: 0;
      margin: 0;
    }
  }
  .merchant-num {
    justify-content: space-between;
    padding-left: 50px;
    padding-right: 110px;
    .box-line {
      width: 1px;
      height: 63px;
      background-color: #f5f5f5;
    }
    .num-item {
      cursor: pointer;
      img {
        width: 54px;
        height: 54px;
      }
      .item-text {
        height: 54px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 16px;
        span {
          color: #999999;
          font-size: 14px;
          vertical-align: bottom;
        }
      }
    }
  }
  .tb-box-one {
    .tb-one,
    .tb-two,
    .tb-three {
      height: 300px;
      overflow: hidden;
    }
    .tb-text {
      width: 330px;
      text-align: center;
      position: absolute;
      top: 47%;
      span {
        font-size: 12px;
        color: #999999;
      }
      p {
        font-size: 22px;
        font-family: 'udc_font';
        color: #000000;
        font-weight: bold;
      }
    }
  }
  .tb-box-two {
    .sales-item {
      height: 152px;
      padding: 30px;
      .sales-num {
        color: #000000;
        font-size: 17px;
        font-weight: 500;
        margin-top: 5px;
        img {
          width: 16px;
          height: 16px;
          vertical-align: text-top;
          margin-left: 8px;
          cursor: pointer;
        }
      }
      .sales-amount {
        width: 95%;
        max-width: 100%;
        color: #000000;
        font-weight: bold;
        font-size: 28px;
        font-family: 'udc_font';
        margin-top: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }
    .withdrawal-box {
      height: 314px;
      .withdrawal {
        height: calc(100% - 30px);
      }
    }
  }
  .tb-box-one,
  .tb-box-two {
    .tb-title {
      color: #333;
      font-size: 18px;
      font-weight: 600;
      vertical-align: bottom;
      img {
        width: 25px;
        height: 25px;
        margin-right: 8px;
      }
      .tb-title-sub {
        color: #999999;
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
  .flow-list {
    & > .ant-col {
      width: calc(50% - 10px) !important;
    }
    .ll-table {
      min-height: 500px;
      padding: 15px;
      .ant-table-wrapper {
        width: 100%;
      }
      span {
        color: #333333;
      }
      .ranking {
        img {
          width: 32px;
          height: 32px;
        }
      }
      .money {
        font-weight: bold;
        font-size: 15px;
        font-family: 'udc_font';
      }
    }
    .flow-sub {
      p {
        color: #333;
        font-size: 18px;
        font-weight: 600;
        .flow-icon {
          display: inline-block;
          width: 68px;
          height: 20px;
          line-height: 20px;
          color: #ffffff;
          font-size: 15px;
          text-align: center;
          background: #ff9462;
          border-radius: 11px;
        }
      }
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.margin-lr-10 {
  margin: 0 10px;
}
.margin-t-10 {
  margin-top: 10px;
}
.margin-t-s {
  margin-top: 15px;
}
.margin-t-df {
  margin-top: 22px;
}
.ll-card {
  min-height: 110px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #f5f5f5;
  padding: 20px;
}
p {
  margin: 0;
  padding: 0;
}
h5 {
  margin: 20px 0;
}
.ant-row-flex {
  flex-flow: nowrap !important;
}
.ant-btn {
  font-size: 13px !important;
}
.ant-btn-primary {
  background-color: #1d6fe9 !important;
  border-color: #1d6fe9 !important;
}
/deep/ .item-text .ant-statistic{
  color: #1d6fe9;
  .ant-statistic-content{
    color: inherit !important;
    font-size: 22px;
    font-family: 'udc_font';
    font-weight: bold;
  }
  &.reds {
    color: #f55f4e;
  }
  &.orgs {
    color: #f5894e;
  }
  &.blues {
    color: #57ae59;
  }
  &.pinks {
    color: #8600ff;
  }
}
/deep/ .ant-progress-inner {
  border-radius: 0 !important;
  .ant-progress-bg {
    border-radius: 0 !important;
  }
}
/deep/ .ant-table-wrapper {
  .ant-table {
    overflow: auto !important;
  }
}
/deep/ .ant-table-wrapper {
  .ant-table,
  .ant-table .ant-table-placeholder,
  .ant-table tbody tr,
  .ant-table thead tr th,
  .ant-table tbody tr td {
    background-color: transparent !important;
    background: none !important;
    border: none !important;
  }
}
.ll-row {
  & > .ant-col:last-of-type {
    margin-left: 20px !important;
  }
}
</style>
